﻿<UserControl x:Class="NexTrackDesktop.Controls.PartyNowPlaying"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="160" d:DesignWidth="700">
    
    <Grid Height="160">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>

            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10" Width="{Binding ActualHeight, RelativeSource={RelativeSource Self}}"
                BorderBrush="Black" BorderThickness="1" CornerRadius="7" Style="{StaticResource AlbumArtStyle}" DataContext="{Binding NowPlaying}"/>
        <Grid Grid.Column="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50*" />
                <ColumnDefinition Width="30*" />
                <ColumnDefinition Width="15*" />
            </Grid.ColumnDefinitions>
            
            <Grid.RowDefinitions>
                <RowDefinition Height="60*" />
                <RowDefinition Height="40*" />
            </Grid.RowDefinitions>
            <!-- TODO album art here-->

            <!--Song Info-->
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="50*" />
                    <RowDefinition Height="50*" />
                    <RowDefinition Height="50*" />
                </Grid.RowDefinitions>

                <Label Content="{Binding Path=NowPlaying.Song.Title, FallbackValue=Title?}" />
                <!-- TODO bind to now playing song-->
                <Label Grid.Row="1" Content="{Binding Path=NowPlaying.Song.Album, FallbackValue=Album?}" FontStyle="Italic" />
                <!-- TODO bind to now playing song-->
                <Label Grid.Row="2" Content="{Binding Path=NowPlaying.Song.Artist, FallbackValue=Artist?}" FontStyle="Italic" FontWeight="ExtraLight"/>
                <!-- TODO bind to now playing song-->
            </Grid>

            <Slider Grid.Row="1" Grid.ColumnSpan="2" VerticalAlignment="Center" Maximum="1" Value="{Binding PositionState}"/>
            
            <!--Play/Pause, Skip, and time slider-->
            <Grid Grid.Column="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="1*" />
                </Grid.ColumnDefinitions>
                <ToggleButton VerticalAlignment="Center" HorizontalAlignment="Center" Name="playPause" IsChecked="{Binding PlayPauseState}" Padding="10">
                    <ToggleButton.Style>
                        <Style TargetType="ToggleButton">
                            <Setter Property="Background" Value="Transparent"/>
                            <Setter Property="BorderThickness" Value="1"/>
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                            <Setter Property="HorizontalContentAlignment" Value="Center"/>
                            <Setter Property="VerticalContentAlignment" Value="Center"/>
                            <Setter Property="Padding" Value="1"/>
                            <Setter Property="Content">
                                <Setter.Value>
                                    <Canvas Name="svg2" Width="32" Height="32" ClipToBounds="True" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
                                        <Canvas Name="backbord">
                                            <Rectangle RadiusX="0" RadiusY="0" Width="32" Height="32" Canvas.Left="0" Canvas.Top="0" />
                                        </Canvas>
                                        <Canvas Name="play">
                                            <Path Fill="#FF000000">
                                                <Path.Data>
                                                    <PathGeometry FillRule="Nonzero" Figures="M10,4L22,15.999 10,28z" />
                                                </Path.Data>
                                            </Path>
                                        </Canvas>
                                    </Canvas>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                                        <Grid x:Name="Chrome" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                        </Grid>
                                        <ControlTemplate.Triggers>
                                            <Trigger Property="IsEnabled" Value="false">
                                                <Setter Property="Foreground" Value="#ADADAD"/>
                                                <Setter Property="Opacity" TargetName="Chrome" Value="0.5"/>
                                            </Trigger>
                                            <Trigger Property="IsMouseOver" Value="true">
                                                <Setter Property="Opacity" TargetName="Chrome" Value="0.75"/>
                                            </Trigger>
                                            <Trigger Property="IsChecked" Value="true">
                                                <Setter Property="Content">
                                                    <Setter.Value>
                                                        <Canvas Name="svg2" Width="32" Height="32" ClipToBounds="True" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
                                                            <Canvas Name="background">
                                                                <Rectangle RadiusX="0" RadiusY="0" Width="32" Height="32" Canvas.Left="0" Canvas.Top="0" />
                                                            </Canvas>
                                                            <Canvas Name="pause">
                                                                <Canvas>
                                                                    <Rectangle RadiusX="0" RadiusY="0" Fill="#FF000000" Width="8" Height="24" Canvas.Left="20" Canvas.Top="4" />
                                                                    <Rectangle RadiusX="0" RadiusY="0" Fill="#FF000000" Width="8" Height="24" Canvas.Left="4" Canvas.Top="4" />
                                                                </Canvas>
                                                            </Canvas>
                                                        </Canvas>
                                                    </Setter.Value>
                                                </Setter>
                                            </Trigger>
                                        </ControlTemplate.Triggers>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </ToggleButton.Style>
                </ToggleButton>
                <!--TODO-->
                <Button VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Column="1" Padding="10"
                        Name="skipNowPlaying" Command="{Binding SkipCommand}" ToolTip="Skip Song">
                    <Button.Style>
                        <Style TargetType="Button">
                            <Setter Property="Background" Value="Transparent"/>
                            <Setter Property="BorderThickness" Value="1"/>
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                            <Setter Property="HorizontalContentAlignment" Value="Center"/>
                            <Setter Property="VerticalContentAlignment" Value="Center"/>
                            <Setter Property="Padding" Value="1"/>
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="{x:Type Button}">
                                        <Grid x:Name="Chrome" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                        </Grid>
                                        <ControlTemplate.Triggers>
                                            <Trigger Property="IsEnabled" Value="false">
                                                <Setter Property="Foreground" Value="#ADADAD"/>
                                                <Setter Property="Opacity" TargetName="Chrome" Value="0.5"/>
                                            </Trigger>
                                            <Trigger Property="IsMouseOver" Value="true">
                                                <Setter Property="Opacity" TargetName="Chrome" Value="0.75"/>
                                            </Trigger>
                                        </ControlTemplate.Triggers>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </Button.Style>

                    <Canvas Name="svg2" Width="32" Height="32" ClipToBounds="True" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
                        <Canvas Name="backbord">
                            <Rectangle RadiusX="0" RadiusY="0" Width="32" Height="32" Canvas.Left="0" Canvas.Top="0" />
                        </Canvas>
                        <Canvas Name="fast_x5F_forward">
                            <Path Fill="#FF000000">
                                <Path.Data>
                                    <PathGeometry FillRule="Nonzero" Figures="M0,28L12,15.999 0,4 0,28z M14,4L14,28 26,15.999 14,4z" />
                                </Path.Data>
                            </Path>
                        </Canvas>
                    </Canvas>
                    
                </Button>
                <!--TODO-->
            </Grid>
        
        <Slider Grid.Column="2" Name="volumeSlider" Value="{Binding VolumeState}" VerticalAlignment="Top" Margin="3"/>
            <!--TODO-->
            <TextBlock Grid.Column="2" Text="Volume" HorizontalAlignment="Center" Margin="0, 30, 0, 0" />
        </Grid>

    </Grid>
</UserControl>
